<template>
  <div class="stats-section">
    <div class="stat-card yellow" @click="$emit('card-click', 'count')">
      <div class="stat-content">
        <div class="stat-title">片区数量</div>
        <div class="stat-value">36</div>
      </div>
    </div>

    <div class="stat-card pink">
      <div class="stat-content">
        <div class="stat-title">任务完成率</div>
        <div class="stat-value">25.59<span class="percent">%</span></div>
      </div>
    </div>

    <div class="stat-card blue" @click="$emit('card-click', 'tasks')">
      <div class="stat-content">
        <div class="stat-title">任务总数</div>
        <div class="stat-value">340</div>
      </div>
    </div>

    <TaskDetailCard 
      v-show="showTaskDetail"
      :data="{
        regularTasks: 327,
        phaseTasks: 13
      }"
    />

    <div class="stat-card deep-blue">
      <div class="stat-content">
        <div class="stat-title">上报事件</div>
        <div class="stat-value">316</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TaskDetailCard from './TaskDetailCard.vue'

defineProps<{
  showTaskDetail: boolean
}>()

defineEmits<{
  'card-click': [type: string]
}>()
</script>

<style scoped>
.stats-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.stat-card {
  border-radius: 8px;
  padding: 20px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.yellow {
  background: linear-gradient(135deg, #fcd367 0%, #f4b244 100%);
}

.pink {
  background: linear-gradient(135deg, #fd7573 0%, #e92021 100%);
  color: white;
}

.blue {
  background: linear-gradient(135deg, #62d1fc 0%, #53c2f8 100%);
  color: white;
}

.deep-blue {
  background: linear-gradient(135deg, #669bfb 0%, #669bfb 100%);
  color: white;
}

.white {
  background: white;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-title {
  font-size: 16px;
  color: #4e1e42;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #141a44;
}

.percent {
  font-size: 16px;
  margin-left: 4px;
}
</style> 